<!DOCTYPE html>
<!--    使用 Thymeleaf 模版引擎-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>JackLin的博客</title>

    <!--    标签栏图标   -->
    <link rel="shortcut icon" href="/image/logo.png" type="image/x-icon">

    <!--    引入导航栏的 css 代码文件-->
    <link rel="stylesheet" th:href="@{/css/article-title.css}">
    <!--    引入右侧关于博客介绍，标签，分类的 css 样式文件-->
    <link rel="stylesheet" th:href="@{/css/article-introduce.css}">
    <!--    引入 editor.md 样式文件  -->
    <link rel="stylesheet" th:href="@{/editor.md-master/css/editormd.css}">
    <link rel="stylesheet" th:href="@{/editor.md-master/css/editormd.preview.css}">
    <!--    目录生成    -->
    <link rel="stylesheet" th:href="@{/lib/menu/tocbot.css}">
    <!--    关于底部备案号的 css 样式文件   -->
    <link rel="stylesheet" th:href="@{/css/blog-footer.css}">


    <!--    字体图标    -->
    <script src="http://at.alicdn.com/t/font_1697913_11exp6ymq1y.js"></script>
    4
    <!--    引入 JQuery   -->
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <!--    引入 editor.md  js 文件    -->
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/editor.md-master/lib/marked.min.js}"></script>
    <script th:src="@{/editor.md-master/lib/prettify.min.js}"></script>
    <script th:src="@{/editor.md-master/lib/raphael.min.js}"></script>
    <script th:src="@{/editor.md-master/lib/underscore.min.js}"></script>
    <script th:src="@{/editor.md-master/lib/sequence-diagram.min.js}"></script>
    <script th:src="@{/editor.md-master/lib/flowchart.min.js}"></script>
    <script th:src="@{/editor.md-master/lib/jquery.flowchart.min.js}"></script>
    <script th:src="@{/editor.md-master/editormd.min.js}"></script>
    <!--    引入代码高亮 js 文件-->
    <script th:src="@{/js/prism.js}"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url("/image/bc.png");
        }

        /* ##############################   Body    ################################*/


        .content {
            width: 100%;
            padding-top: 35px;
            /*height: 1000px;*/
            /*background-color: papayawhip;*/
            display: inline-block;
        }

        .content-bottom {
            margin: 100px 192px;
            /*height: 1000px;*/
            width: 1135px;
            background-color: #ffffffbf;
            box-shadow: 0px -5px 10px yellow, 5px 0 10px red;
            border-radius: 15px;
            display: inline-block;

        }

        .content-bottom p {
            color: #000000;
            font-weight: lighter;
            font-size: 22px;
        }

        .content-left {
            width: 735px;
            /*height: 1000px;*/ /*  有里面的内容决定高度  */
            /*background-color: #1bd7db;*/
            box-sizing: border-box;
            margin-left: 13px;
            margin-top: 10px;
            float: left;

        }


        /*      文本显示内容      */
        #showData p {
            font-size: 17px;
            font-weight: 400;
        }

        #showData li {
            font-size: 15px;
            font-weight: 400;
        }

        .js-toc {
            width: 300px;
            position: fixed;
            right: 185px;
            top: 170px;
            color: #4183c4;
        }

        .js-toc li {
            margin-top: 5px;
        }

        .js-toc a {
            text-decoration: none;
            margin-top: 5px;
        }

        .hide-number {
            width: 40px;
            height: 40px;
            background-color: white;
            position: absolute;

        }


        /*      文章标题，分类，阅读量等基本信息    */
        .left-top .tags {
            display: inline-block;
            margin-bottom: 10px;
        }

        .left-top .tags span {
            display: inline-block;
            border: 1px solid #CCCCCC;
            padding: 5px;
            margin-right: 20px;
            margin-bottom: 10px;
            border-radius: 5px;
            background: -webkit-linear-gradient(left, rgb(245, 149, 149) 1%, rgb(115, 211, 223) 100%);
            color: white;
        }

        .left-top h1 {
            text-align: center;
            margin-bottom: 10px;
            width: 100%;
            /*  彩色字体    */
            background: linear-gradient(to right, #fa709a 0%, #fee140 100%);
            -webkit-background-clip: text;
            color: transparent;
        }

        .left-top .information {
            text-align: center;
            margin-bottom: 10px;
        }

        .left-top .information div {
            display: inline-block;
            margin-right: 23px;
            color: #525f7f;
        }


    </style>

</head>

<body>

<!--    文章页面：头部导航栏-->
<div th:replace="~{common/commonsfile::article-topbar}"></div>

<!--    文章具体内容  -->
<div class="content">

    <div class="content-bottom" id="text">


        <div class="content-left">

            <!--    博客标题，发布时间，分类，标签等基本信息-->
            <div class="left-top">
                <h1 th:text="${blog.getBtitle()}"></h1>
                <div class="tags">
                    <span th:each="tag, tagState:${tags}" th:text="${tag.getTagname()}"></span>
                </div>
                <div class="information">
                    <div>
                        发布日期:<span th:text="${#dates.format(blog.getCreatetime(), 'yyyy-MM-dd HH:mm:ss')}"></span>
                    </div>
                    <div>
                        阅读量:<span th:text="${blog.getViews()}"></span>
                    </div>
                    <div>
                        所属分类:
                        <span>
                            <a href="#" th:text="${blog.getType().getTypename()}"></a>
                        </span>
                    </div>
                </div>

            </div>


            <!--    博客内容-->
            <div id="showData" class="animated rubberBand language-css">
                <textarea id="htmlText" th:text="${blog.getBcontent()}" style="display: none"></textarea>
            </div>


        </div>

        <!--    文章目录    -->
        <div class="js-toc">
            <div class="hide-number"></div>
        </div>


    </div>

</div>

<!--    文章底部-->
<div th:replace="~{common/commonsfile::blog-footerbar}"></div>


<!--    目录生成    -->
<script th:src="@{/lib/menu/tocbot.js}"></script>
<!--    关于底部博客运行时间统计的 JS 代码-->
<script th:src="@{/js/time.js}"></script>

<script>
    $(function () {


        /*  注意这个 showData 就是需要展示文本的标签的 id*/
        editormd.markdownToHTML("showData", {
            htmlDecode: "style,script,iframe", //可以过滤标签解码
            emoji: true,
            taskList: true,
            tex: true,               // 默认不解析
            flowChart: true,         // 默认不解析
            sequenceDiagram: true,  // 默认不解析
        });
        // 等待转换成为 HTMl 格式之后再展示出来
        $("htmlText").css('display', 'block');

        /*  目录自动生成  */
        tocbot.init({
            // Where to render the table of contents.
            tocSelector: '.js-toc',
            // Where to grab the headings to build the table of contents.
            contentSelector: '#showData',
            // Which headings to grab inside of the contentSelector element.
            headingSelector: 'h1, h2, h3, h4, h5',
            // For headings inside relative or absolute positioned containers within content.
            hasInnerContainers: true,
        });


    });
</script>

</body>
</html>